<template>
  <div class="add-ti">
    <ckeditor id="ck" v-model="quesData.content" :height="'90px'" :placeholder="'请输入题干'"></ckeditor>
    <addUploads :quesFileList="quesData.quesFileList"></addUploads>
    <a-button class="child-btn" @click="addRadio">添加单选题</a-button>
    <a-button class="child-btn" @click="addCheck" v-if="quesData.type != 11">添加多选题</a-button>
    <a-button class="child-btn" @click="addTrueFalse" v-if="quesData.type != 11">添加判断题</a-button>
    <a-button class="child-btn" @click="addQuestionAnswer" v-if="quesData.type != 11">添加问答题</a-button>
    <div class="add-question-child" v-for="(item,index) in quesData.options" :key="index">
      <div>
        <i class="Ti-icon icon-delete" style="color: #f00;margin-left: 5px;cursor: pointer;" @click="setOptions(index)">删除</i>
      </div>
      <childRadioCheck
        v-if="item.type == 1 || item.type == 2"
        :childData="item"
        :num="index+1"
        :childType="item.type"
      ></childRadioCheck>
      <childTrueFalse v-if="item.type == 3" :childData="item" :num="index+1" :childType="item.type"></childTrueFalse>
      <childQuestionAnswer
        v-if="item.type == 6"
        :childData="item"
        :num="index+1"
        :childType="item.type"
      ></childQuestionAnswer>
    </div>
    <div style="margin-top: 10px;">
      <span style="line-height: 37px;">答案解析：</span>
      <div style="display: inline-block;width: calc(100% - 100px);vertical-align: top;">
        <ckeditor id="ck" v-model="quesData.analysis" :height="'90px'" :placeholder="'请输入解析'"></ckeditor>
      </div>
    </div>
  </div>
</template>

<script>
import addUploads from '@/components/addTi/addUpload/index.vue';
import childRadioCheck from '@/components/addTi/child/childRadioCheck.vue';
import childTrueFalse from '@/components/addTi/child/childTrueFalse.vue';
import childQuestionAnswer from '@/components/addTi/child/childQuestionAnswer.vue';
export default {
  data() {
    return {
      content: '',
      radioStyle: { display: 'block' }
    };
  },
  components: {
    addUploads,
    childRadioCheck,
    childTrueFalse,
    childQuestionAnswer
  },
  props: {
    quesData: {
      type: Object,
      default: () => {}
    },
    quesType: {
      type: Number,
      default: 0
    }
  },
  mounted() {
    console.log('大题');
    console.log(this.quesData);
  },
  methods: {
    getData() {
      console.log(this.quesData);
    },
    addRadio() {
      var lis = {
        id: '',
        type: 1,
        content: '',
        quesFileList: [],
        isShowQuesType: true,
        options: [
          {
            content: ''
          },
          {
            content: ''
          },
          {
            content: ''
          },
          {
            content: ''
          }
        ],
        answer: [],
        analysis: ''
      };
      this.quesData.options.push(lis);
    },
    addCheck() {
      var lis = {
        id: '',
        type: 2,
        content: '',
        quesFileList: [],
        isShowQuesType: true,
        options: [
          {
            content: ''
          },
          {
            content: ''
          },
          {
            content: ''
          },
          {
            content: ''
          }
        ],
        answer: [],
        analysis: ''
      };
      this.quesData.options.push(lis);
    },
    addTrueFalse() {
      var lis = {
        id: '',
        type: 3,
        content: '',
        quesFileList: [],
        isShowQuesType: true,
        options: [
          {
            value: 1,
            content: '正确'
          },
          {
            value: 0,
            content: '错误'
          }
        ],
        answer: [],
        analysis: ''
      };
      this.quesData.options.push(lis);
    },
    addQuestionAnswer() {
      var lis = {
        id: '',
        type: 6,
        content: '',
        quesFileList: [],
        options: [],
        answer: [],
        analysis: ''
        // standard: []
      };
      this.quesData.options.push(lis);
    },
    setOptions(index) {
      if (this.quesData.options.length > 0) {
        this.quesData.options.splice(index,1);
      } else {
        return this.$message.warning('该题型必须有一题子题目');
      }
    }
  }
};
</script>

<style>
</style>